<template>
    <div class="song-info">
        <div class="info-box" @click="toPlayer(song_id)">
            <div class="song-name-and-alias"> <p>  <em>{{song_name}}</em> {{song_alias}} </p> </div>
            <div class="song-artists-and-album"> {{song_art}} - {{song_album.name}}</div>
        </div>
        <div class="icon-box"><i class="iconfont icon-play"></i></div>
    </div>
</template>

<script>
export default {
    name: 'SongInfo',
    created() {},
    props: ['song_name','song_art','song_album','song_belong_playlist','song_id','song_alias'],
    methods: {
        toPlayer(song_id) {
            console.log(this.$router);
            this.$router.push({
                name: "player",
                params: {
                    song_name: this.song_name,
                    song_art : this.song_art,
                    song_album_img : this.song_album.picUrl,
                    song_belong_playlist : this.song_belong_playlist,
                    song_id : this.song_id
                }              
            });
        }
    },
}
</script>

<style lang="scss" scoped>
    .song-info{
        position: relative;
        text-align: left;
        width: 100%;
        height: 50px;
        padding: 9px;
        .info-box{
            width: calc( 100% - 50px );
            .song-name-and-alias{
                p{
                    color: #cccccc;
                    font-size: 14px;
                    line-height: 18px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
        
                    em{
                        color: #eeeeee;
                        font-size: 16px;
                        margin-right: 10px;
                    }
                }
            }
            .song-artists-and-album{
                width: 100%;
                color: #dddddd;
                font-size: 12px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
    .icon-box{
        position: absolute;
        width: 32px;
        height: 32px;
        top: 50%;
        bottom: 50%;
        margin: auto 3px;
        right: 15px;
        // background-color: #fff;
        .iconfont{
            color: #dedede;
            font-size: 24px;
        }
    }
</style>
